<template>
	<view class="layout">
		<scroll-view class="scroll-view-box" scroll-y>
			<view class="type-list">
				<view class="type-box">
					<view class="type-title">{{typeObj.collection}}</view>
					<view class="action" @click="openMore(typeObj.collection)">查看更多


						<u-icon class="iconbox" name="arrow-right" color="#979797" size="24"></u-icon>
					</view>
				</view>
				<view class="goods-list">
					<view @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in typeObj.option"
						:key="item_index">
						<view class="goods-img">
							<!-- bannerUrl -->
							<u-image :src="item.gamePhoto" height="480rpx" mode="aspectFill" width="100%">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<!-- goodsVideo -->
							<view class="goods-desc">
								<view class="goods-title wes-1">
									<!-- {{ item.goodsName }} -->
									{{ item.gameName }}
								</view>
								<view class="goods-bottom">
									<view class="goods-price wes-1">
										<view>
											<!-- {{ item.desc}} -->
											{{ item.gameIntro}}

										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		getGoodsList
	} from "@/api/goods.js";
	export default {
		title: "游戏推荐",
		components: {
		},
		data() {
			return {

			};
		},
		props: ["typeObj"],
		watch: {

		},
		mounted() {},
		onReachBottom() {

		},
		destroyed() {

		},
		methods: {
			openMore(collection) {
				uni.navigateTo({
					url: `/pages/mine/collectionGames?collection=${collection}`,
				});
			},
			handleClick(detail) {

				// 进入游戏首页,根据游戏id获取首页详情
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${detail.gameId}`,
				});
			},

		},
	};
</script>
<style lang="scss" scoped>
	$w_94: 94%;

	.layout {
		padding: 8px 0;
		// background: #f9f9f9;
	}

	.type-list {
		margin-top: 20rpx;
		padding: 0 44rpx;

		.type-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0rpx;

			.type-title {
				font-size: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.action {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #979797;
				display: flex;
				align-items: center;
			}

			.iconbox {
				display: flex;
				align-items: center;

			}
		}
	}

	.selected-title {
		>h4 {
			font-size: 30rpx;
			color: $main-color !important;
		}

	}

	.goods-cell-title {
		// background: #f9f9f9;
		padding: 10px;
		transition: 0.35s;
		display: flex;

		>.goods-item-title {
			flex: 1;
			text-align: center;

			>h4 {
				font-size: 32rpx;
				color: #999;
			}

			>div {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 50%;
		margin-bottom: 9rpx;
		border-radius: 0.4em;
		overflow: hidden;
	}

	.goods-img {
		position: relative;
		margin: 0 auto;
		// width: 158px;
		// width: $w_94;
		margin: 7rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.goods-desc {
		width: 100%;
		background: #FFFFFF;
		padding: 8rpx 0 8rpx 8rpx;
		margin: 0 auto;
		border-radius: 0 0 20rpx 20rpx;

		>.goods-title {
			font-size: 30rpx;
			color: #181818;
			display: -webkit-box;
			font-weight: 500;
			padding: 5rpx;
		}

		>.goods-bottom {
			display: flex;
			// font-weight: bold;
			margin-top: 5rpx;

			>.goods-price {
				// width: 100rpx;
				// background: #A0CC44;
				color: #979797;
				padding: 5rpx;

				>span {
					font-size: 26rpx;
				}
			}
		}
	}
</style>